<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <style>
        html,body{
            background-color: #F6F7F8;
            /*background: transparent;*/
        }
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        .live-block {
            width: 3.75rem;
            height: 2.95rem;
            margin-bottom: 0.08rem;
            background-color: white;
        }
        .live-background {
            width: 1.76rem;
            height: 0.70rem;
            background-size: 1.76rem 0.70rem;
            background-image: url(../image/course/live-background.png);
            align-items: flex-end;
            justify-content: center;
            flex-wrap: wrap
        }
        .live-tag-author {
            font-size: 0.12rem;
            line-height: 0.17rem;
            color: #FFFFFF;
        }
        .live-tag {
            position: absolute;
            height: 0.20rem;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.20);
            /*background-color: white;*/
            border-radius: 0.04rem;
            right: 0.10rem;
            top: 0.10rem;
        }
        .live-title {
            font-size: 0.16rem;
            line-height: 0.22rem;
            color: #231313;
            white-space:nowrap;
            text-overflow:ellipsis;
            overflow:hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            word-break:break-all;
            -webkit-line-clamp: 1; /* 控制显示的行数 */
            margin-top: 0.06rem;
            margin-bottom: 0.06rem;
            margin-left: 0.15rem;
            margin-right: 0.15rem;
            max-width: 3.45rem;
        }
        .live-tag-browse {
            font-size: 0.13rem;
            color: #FFFFFF;
            font-weight: 800;
            margin-right: 0.10rem;
        }
        .point {
            width: 0.04rem;
            height: 0.04rem;
            border-radius: 0.02rem;
            background-color: #ECC344;
            margin-right: 0.02rem;
            margin-left: 0.10rem;
        }
        .not-active {
            display: none;
        }
        .user-img {
            background-size: 0.35rem 0.35rem;
            border-radius: 0.175rem;
            margin-left: 0.15rem;
            margin-right: 0.10rem;
        }
        .live-thumb {
            position: relative;
            width: 3.45rem;
            height: 1.95rem;
            background-size: 3.45rem 1.95rem;
        }
        .video-image-cover {
            position: absolute;
            width: 3.45rem;
            height: 1.95rem;
            background-size: 3.45rem 1.95rem;
            background-image: url("../image/course/live-background.png");
            justify-content: center;
            align-items: center;
            /*padding: 0.08rem;*/
        }
        .play-icon {
            width: 0.24rem;
            height: 0.24rem;
            background-size: 0.24rem 0.24rem;
            background-image: url(../image/course/play-icon.png);
        }
    </style>
</head>
<body>
<div id="live-list"></div>
</body>
</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common/common.js"></script>
<script type="text/javascript">
    var liveListEl;
    var pageNum = 1;
    apiready = function () {
        liveListEl = $api.byId('live-list');

        getLiveList();

        api.addEventListener({
            name:'scrolltobottom',
            extra:{
                threshold:1000
            }
        }, function(ret, err){
            getLiveList();
        });

        api.setRefreshHeaderInfo({
            bgColor: 'rgba(255, 255, 255, 0)',
            textColor: '#000000',
            textDown: '下拉可以刷新',
            textUp: '松开立即刷新',
            textLoading: '正在刷新数据中',
            textTime: '最后更新'
        }, function(ret, err) {
            window.location.reload();
            api.refreshHeaderLoadDone();
        });
    }

    function getLiveList() {
        api.ajax({
            url: apiUrl + '/article/live-list',
            tag: '/article/live-list',
            method: 'get',
            data: {
                page_size: 20,
                page_num: pageNum,
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    var liveListData = ret.data;
                    if ((pageNum-1)*20 <= liveListData.total) {
                    // if ((pageNum-1)*20 <= 1) {
                        liveListData = liveListData.live_list;
                        for (var i=0,leni=liveListData.length; i<leni; i++)
                        {
                            $api.append(liveListEl,
                                '<div id=' + "l-" + liveListData[i]["live_id"] + ' class="live-block" tapmode onclick="openLiveInfoWin(this)">' +
                                    '<div style="width: 100%; height: 0.15rem;"></div>' +
                                    '<div class="flex" style="width: 100%; height: 0.35rem;">' +
                                        '<div class="user-img" style="background-image: url(' + liveListData[i]['user-img'] + ')"></div>' +
                                        '<div>' +
                                            '<p style="font-size: 0.14rem; color: #231313; font-weight: 600">' + liveListData[i]['author'] + '</p>' +
                                            '<p style="font-size: 0.12rem; color: #7C7272;">' + liveListData[i]['user-fans'] + '</p>' +
                                        '</div>' +
                                    '</div>' +
                                    '<p class="live-title">' + liveListData[i]['title'] + '</p>' +
                                    '<div class="flex" style="width: 100%; justify-content: center">' +
                                        '<div class="live-thumb" style="background-image: url(' + liveListData[i]['thumb'] + ');">' +
                                            '<div class="flex video-image-cover">' +
                                            '<div class="play-icon"></div>' +
                                            '</div>' +
                                            '<div class="flex live-tag" style="align-items: center;">' +
                                            '<div class="point"></div>' +
                                            '<p class="live-tag-browse">' + liveListData[i]['browse'] + '</p>' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>' +

                                    // '<div class="flex live-background">' +
                                    //     '<p class="live-title">' + liveListData[i]['title'] + '</p>' +
                                    //     '<div class="flex live-tag">' +
                                    //         '<p class="live-tag-author">' + liveListData[i]['author'] + '</p>' +
                                    //         '<div class="flex" style="align-items: center;">' +
                                    //             '<div class="point"></div>' +
                                    //             '<p class="live-tag-browse">' + liveListData[i]['browse'] + '</p>' +
                                    //         '</div>' +
                                    //     '</div>' +
                                    //     '<div style="width: 100%; height: 0.08rem"></div>' +
                                    // '</div>' +
                                '</div>');
                        }
                    }
                    pageNum ++;
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function openLiveInfoWin(el) {
        var id, liveId;
        id = $api.attr(el,'id');
        liveId = id.substring(2);
        api.openWin({
            name: 'liveWin',
            url: './course/liveWin.html',
            slidBackType: 'edge',
            pageParam: {
                live_id: liveId,
            },
            animation: {
                type:"movein",
                subType:"from_right",
                duration:300
            }
        });
    }
</script>
